<template>
  <div>
    <TodoInput></TodoInput>
    <TodoFilter></TodoFilter>
    <TodoItem v-for="todo in filteredTodoList" :key="todo.id" :todo="todo"></TodoItem>
  </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'

import TodoFilter from './components/TodoFilter.vue';
import TodoInput from './components/TodoInput.vue';
import TodoItem from './components/TodoItem.vue';

import { useTodoStore } from './stores/todo-store';

const todoStore = useTodoStore()

const { filteredTodoList } = storeToRefs(todoStore)
</script>
